<route lang="json5" type="payList">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '设备管理 > 支付套餐',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import type { DeviceList } from '@/api/device'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

const page = ref(1)
const loadState = ref<'loading' | 'error' | 'finished'>('loading')
// const { loading, error, data, run } = useRequest<DeviceList>(() => getPayList({ page: page.value }), { immediate: true })

const dataList = ref([]) // 列表数据
const total = ref(50) // 总数据量
function loadMore() {
  console.log('滚动到底部加载更多数据')
  // page.value++
  // run()
  // data.value = {
  //   code: 0,
  //   list: [],
  //   total: 0,
  //   pageNum: 0,
  //   pageSize: 0,
  //   text: '',
  // }
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
  // getPayList({ page: page.value }).then((res: any) => {
  //   console.log(res)
  //   const { code, text } = res
  //   if (code === 0) {
  //     loadState.value = 'error'
  //     uni.showToast({
  //       title: text,
  //       icon: 'none',
  //     })

  //     // uni.redirectTo({
  //     //   url: '/pages/login/login',
  //     // })
  //   }
  // })
}
onLoad(() => {
  loadMore()
})

onReachBottom(() => {
  // 触底加载更多数据
  console.log('触底加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  name: '',
  price: '',
  coin: '',
})
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
const editType = ref(0)
function handleEdit(type: number) {
  editType.value = type
  showEdit.value = true
}
function handleClose() {
  showEdit.value = false
}
</script>

<template>
  <view class="bottom-btn-pd">
    <view class="wot-list-top-wrap">
      <view class="wot-row wot-title">
        <wd-row>
          <wd-col :span="8">
            <view class="wot-item">
              套餐名称
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              金额 / 上币
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              操作
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
    <view v-if="dataList.length === 0" class="pt-20">
      <wd-status-tip image="content" tip="暂无内容" />
    </view>
    <view v-else class="wot-list">
      <view v-for="(item, index) in dataList" :key="index" class="wot-row">
        <wd-row>
          <wd-col :span="8">
            <view class="wot-item">
              20元30币
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              <wd-tag custom-class="tag" type="success">
                1.00元1币
              </wd-tag>
            </view>
          </wd-col>
          <wd-col :span="8">
            <view class="wot-item">
              <wd-tag type="primary" custom-class="tag" @click="handleEdit(1)">
                修改
              </wd-tag>
            </view>
          </wd-col>
        </wd-row>
      </view>
      <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    </view>
    <safe-bottom>
      <wd-button type="primary" size="small" block @click="handleEdit(0)">
        新增
      </wd-button>
    </safe-bottom>
    <wd-action-sheet v-model="showEdit" :title="`【 ${editType === 0 ? '新增' : '编辑'} > 套餐 】`" @close="handleClose">
      <view class="action-sheet-content">
        <wd-form ref="editRef" :model="formModel">
          <wd-cell-group border>
            <wd-input
              v-model="formModel.name"
              label="套餐名称"
              label-width="100px"
              prop="name"
              clearable
              placeholder="如1元1币"
              :rules="[{ required: true, message: '套餐名称不能为空' }]"
            />
            <view class="wot-tips">
              多少钱/多少币 或 多少钱/多少秒
            </view>
            <wd-input
              v-model="formModel.price"
              label="多少钱"
              label-width="100px"
              prop="price"
              clearable
              placeholder="支付多少钱"
              :rules="[{ required: true, message: '套餐金额不能为空' }]"
            />
            <view class="wot-tips">
              与{ 设备配置 }里的{ 支付单位 }有关
            </view>
            <wd-input
              v-model="formModel.coin"
              label="多少币"
              label-width="100px"
              prop="coin"
              clearable
              placeholder="上多少币"
              :rules="[{ required: true, message: '套餐上币数不能为空' }]"
            />
            <view class="wot-tips">
              换算: 1元1秒 = 1000毫秒
            </view>
          </wd-cell-group>
          <view class="desc">
            <view>如：</view>
            <view>分别输入：1元2币 : 1 : 2 / 2分3币 : 0.02 : 3</view>
            <view>多少钱：与 { 设备配置 } 支付单位 有关</view>
            <view>多少币：与 { 设备配置 } 信号类型 有关</view>
            <view>如是计时动作：{多少币}的{数字}为{多少秒}，有协助换算</view>
          </view>
          <view class="btn-outer-pd">
            <wd-button type="primary" size="small" block @click="handleSubmit">
              提交
            </wd-button>
          </view>
        </wd-form>
      </view>
    </wd-action-sheet>
  </view>
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.scroll-view {
    height: calc(100vh - 172rpx - env(safe-area-inset-bottom));
}
.confirm-btn {
  padding-top: 40rpx;
}
.desc{
  padding: 20rpx 30rpx;
  font-size: 24rpx;
  line-height: 32rpx;
  color: $uni-color-warning;
}
</style>
